<template>

	<div class="main-container">
		<el-form ref="queryForm" :inline="true" :model="queryForm" class="filter-container" label-width="100px">
			<el-form-item class="filter-item" prop="searchKey">
				<el-input :model="queryForm.name" placeholder="请输入要查找的项目名称" prefix-icon="el-icon-search" clearable
					display:inline-block @keyup.enter.native="handleSearch">
				</el-input>
				<el-button type="primary" plain @click="handleSearch">查询</el-button>
			</el-form-item>
		</el-form>
		<div class="table-box">
			<el-table ref="tableList" border  :data="tableList"
			 :header-cell-style="{'text-align':'center'}" >
				<el-table-column prop="id" label="序号" type="index"></el-table-column>
				<el-table-column prop="name" label="项目名称" align="center"></el-table-column>
				<el-table-column prop="projectType" label="类型" align="center"></el-table-column>
				<el-table-column prop="projectPerson" label="负责人" align="center"></el-table-column>
				<el-table-column prop="thisDept" label="所属部门" align="center"></el-table-column>
				<el-table-column prop="contractMoney" label="项目金额（万）" align="center"></el-table-column>
				<el-table-column prop="actualStartTime" label="开始时间" align="center"></el-table-column>
				<el-table-column prop="actualEndTime" label="结项时间" align="center"></el-table-column>
			</el-table>
		</div>
		<div class="page-container">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="20"
				layout="total, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import Index from '../../../components/system/index/index'
	export default {
		name: 'home',
		components: {
			Index
		},
		data() {
			return {
				queryForm: {},
				tableList: [],
				currentPage4: 1,
				total: ""
			};
		},
		methods: {
			search() {
				console.log(this.input2)
				this.tableData = this.tableData.filter(item => {
					console.log(item)
					return item.name == this.input2
				})
			},
			handleCurrentChange(page) {
				console.log(page)
			},
      handleSearch(){
			  this.showList()
      },
			showList() {
				this.$axios.get('http://localhost:8089/project/list?pageNum='+this.currentPage4).then((resp) => {
					this.tableList = resp.data.data.pageInfo.list
					this.total = resp.data.data.pageInfo.total
					console.info(this.tableList)
				})
			}
		},
		created() {
			this.showList()
		}
	}
</script>

<style scoped>

	.main-container{

	}
	.filter-container {
	/* padding: 8px 64px 16px 0;*/
	text-align:center
	}
	.filter-item:not(:last-child) {
	margin-right: 16px;
	}

	.filter-item {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 10px;
	}

	.el-input {
	width: auto;
	}

	.el-select {
	width: auto;
	}
	.table-box{
	margin:0 32px;
	}
	.page-container {
	float: right;
	padding:0 16px 16px;
	}
	</style>
